<template lang="html">
  <div v-loading="loading">
    <div class="dan">
      <span>主图(单张):</span>
        <el-upload
          ref="danzhang"
          v-show = 'danzhang'
          :action="uploadingImg"
          list-type="picture-card"
          :http-request='custom'
          :file-list="fileList"
          :limit="1"
          :on-exceed="exceed"
          :multiple="false"
          :on-change="changeImgFile"
          :on-preview="handlePictureCardPreview"
          :auto-upload="false">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
       <el-button type="success" @click="custom" :disabled='danisabled' class="bc">保存</el-button>
    </div>
    <div class="duo dan">
        <span>轮播图(多张):</span>
        <el-upload
          :action="uploadingImg"
           list-type="picture-card"
          :http-request='multiplecustom'
          :file-list="pageImgUrlList"
          :on-change="upload"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :auto-upload="false">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
       <el-button type="success" @click="multiplecustom" :disabled="disabled" class="bc">保存</el-button>
    </div>
  </div>
</template>

<script>
  import { Base64 } from 'js-base64';
  import Data from './index.js'
  import tableVue from '@/components/alltable.vue'
  import dialogVue from '@/components/dialog.vue'
  import {
    upLoadingImg
  } from "@/api/shoppingCentre/shoppingCentre";
  import {
    getImg,
    addImg,
    upMultipleImg,
    addmultipleImg
  } from "@/api/shoppingCentre/productCentre";
  export default {
    components : {
      tableVue,
      dialogVue
    },
    data () {
      return JSON.parse(JSON.stringify(Data))
    },
    mounted () {
      if (this.$store.state.category.goodsId == '') {
         this.$store.state.category.idx = '2'
         return false
      }

      this.pageData.goodsId = this.$store.state.category.goodsId;
      this.getImgList();
    },
    methods : {
      handleRemove (file, fileList) {
        this.pageImgUrlList.map((item,idx,arr) => {
           if (item.url == file.url) {
             arr.splice(idx,1);
           }
         })
         this.pagefileUrl.map((item,idx,arr) => {
            if (item.id == file.uid) {
              arr.splice(idx,1);
            }
          })
      },
      handlePictureCardPreview (file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      getImgList () {//获取列表
        this.loading = true;
        this.fileList = [];
        this.pageImgUrlList = [];
        getImg(this.$store.state.category.goodsId).then(res=>{
          if(res.data.code == 'OK') {
            console.log(res);
            this.danisabled = false;
            this.loading = false;
            res.data.data.map(item=>{
              if (item.isMaster == 'Y') {
                this.fileList.push({
                  name : '',
                  url : item.pictureUrl
                })
              } else {
                this.pageImgUrlList.push({
                  name : '',
                  url : item.pictureUrl
                })
              }
            })
          }
        })
      },
      exceed (files, fileList) {
        this.$message.error("只能传一张图片");
      },
      changeImgFile (file) {//拿到单张图片的地址
          let reader = new FileReader();
          reader.readAsDataURL(file.raw);
          reader.onload =  () => {
            this.imgData.base64Str = reader.result.split(',')[1];
            this.imgData.id = file.uid;
            this.imgData.fileOriginName = file.name;
            this.imgData.fileType = file.name.split('.')[1];
          }
      },
      upload (file,fileList) {//拿到多张图片的地址多张
           let reader = new FileReader();
           reader.readAsDataURL(file.raw);
           reader.onload =  () => {
            this.pagefileUrl.push({
              base64Str: reader.result.split(',')[1],
              id:file.uid,
              fileOriginName : file.name,
              fileType : file.name.split('.')[1]
            });
           }
      },
      multiplecustom () {//多张图片上传
        // if (this.pagefileUrl.length == 0) {
        //   this.$message.error('请添加图片')
        //   return false
        // }
        this.disabled = true;
        this.danisabled = true;//单张
        this.$message({
           showClose: true,
           message: '图片正常在上传请稍后.......',
           type: 'warning'
         });
         if (this.pagefileUrl.length == 0) {
             this.submitForm()
             return false
         }
         upMultipleImg(this.pagefileUrl).then(res=>{
           if (res.data.code == 'OK') {
               this.disabled = false;
              this.$message.success('上传图片成功');
                res.data.data.map(item=>{
                  this.pageImgUrlList.push({
                     uid : item.uid,
                     status : 'success',
                     name : '',
                     url :item.fileURL
                  })
                })
                this.pagefileUrl = [];
              this.submitForm();
           } else {
              this.$message.error(res.data.message)
           }
         })
      },
      submitForm () {//多张
          // if (this.pageImgUrlList.length < 0) {
          //    this.$message.error('请上传到服务器')
          //    return false
          // }
          var data = {
            goodsId : this.$store.state.category.goodsId,
            pictures : this.pageImgUrlList.map(item => {return item.url})
          }
          addmultipleImg(data).then(res=>{
            if (res.data.code == 'OK') {
               this.$message.success('添加成功')
                 this.getImgList();
                 this.disabled = false;
            } else {
              this.$message.error(res.data.message)
            }
          })
       },
      custom (file) {//单张图片上传
        this.$message({
           showClose: true,
           message: '图片正常在上传请稍后.......',
           type: 'warning'
         });
        var data = {
          base64Str : this.imgData.base64Str,
          fileOriginName : this.imgData.fileOriginName,
          fileType : this.imgData.fileType,
          id : this.imgData.id,
        }
        upLoadingImg(data).then(res=>{
          if (res.data.code == 'OK') {
              this.$message.success('上传图片成功');
              this.pageData.pictureUrl = res.data.data.fileURL;
              this.upForm();
          } else {
            this.$message.error(res.data.message);
          }
        })
      },
      upForm () {//单张确定
         if (this.pageData.pictureUrl == '') {
            this.$message.error('请把图片上传到服务器')
            return false
         }

         addImg(this.pageData).then(res=>{
           if (res.data.code == 'OK') {
              this.$message.success('添加成功');
                this.getImgList();
           } else {
             this.$message.error(res.data.message)
           }
         })
       },
    }
  }
</script>

<style scoped>
.confirm {
  position: absolute;
  bottom: -1px;
  right: 100px;
}
.duo {
  margin-top: 50px;
}
.dan {
  margin-top: 100px;
  display: flex;
  align-items: center;
}
.dan span {
  margin-right: 20px;
  display: inline-block;
  width: 100px;
}
.bc {
  margin-left: 20px;
}
</style>
